<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Open UML Online</title>

        <!-- Standard reset and fonts -->
        <link rel="stylesheet" type="text/css" href="../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../build/fonts/fonts.css">
        <link rel="stylesheet" type="text/css" href="../build/container/assets/container.css">
	<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />

        <!-- CSS for Menu -->
        <link rel="stylesheet" type="text/css" href="../build/menu/assets/menu.css"> 

        <!-- Page-specific styles -->
        <style type="text/css">

        html {
                background-color: white;
	}
			
	em#yahoolabel {
	        text-indent: -6em;
                display: block;
                background: url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
                width: 2em;
                overflow: hidden;
	}
          
	/*
	    Setting the "zoom" property to "1" triggers the "hasLayout" 
	    property in IE.  This is necessary to fix a bug IE where 
	    mousing mousing off a the text node of MenuItem instance's 
	    text label, or help text without the mouse actually exiting the
	    boundaries of the MenuItem instance will result in the losing  
	    the background color applied when it is selected.
	*/
	#filemenu.visible .yuimenuitemlabel,
	#editmenu.visible .yuimenuitemlabel {
		*zoom: 1;
	}

	/*
		Remove "hasLayout" from the submenu of the file menu.			
	*/
	#filemenu.visible .yuimenu .yuimenuitemlabel {
		*zoom: normal;
        }

	.dd-demo {
	    position:relative;
	    border:4px solid #666;
	    text-align:center;
	    color:#fff;
	    cursor:move;
	    height:60px;
	    width:60px;
	}
	
	.dd-demo-em {
	    border:4px solid purple;
	}
	
	#dd-demo-1 { 
	    background-color:#6D739A;top:15px; left:5px;
	}
	
	#dd-demo-2 { 
	    background-color:#566F4E;top:20px; left:5px;
	}
	
	#dd-demo-3 {
	    background-color:#7E5B60;top:25px; left:5px;
	}

        </style>

        <!-- Dependency source files -->
        <script type="text/javascript" src="../build/utilities/utilities.js"></script>
	<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>

	<!-- Drag and Drop -->
	<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
        <script type="text/javascript" src="../build/container/container.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="../build/menu/menu.js"></script>

        <!-- Page-specific script -->
        <script type="text/javascript">

	/*
	     Initialize and render the MenuBar when the page's DOM is ready 
	     to be scripted.
	*/
	YAHOO.util.Event.onDOMReady(function () {

	/*
	     Define an array of object literals, each containing 
	     the data necessary to create the items for a MenuBar.
	*/
	var aItemData = [
			{ 
                        	text: "File", 
                        	submenu: {  
                            		id: "filemenu", 
                            		itemdata: [
                                	{ text: "New Tab" },
                                	{ text: "New Project" },
                                	{ text: "Open Project" },
					{ text: "Save Project" },
					{ text: "Save Project As" },
					{ text: "Close Project" },
					{ text: "Exit" }
                            		] 
                        		}
                    
                    	},
                    	{
                        	text: "Edit", 
                        	submenu: { 
                            		id: "editmenu", 
                            		itemdata: [
                                    	{ text: "Cut" },
                                    	{ text: "Copy" },
                                    	{ text: "Paste" },
					{ text: "Select All" },
					{ text: "Find", }
                                	],
                         		}

                    	},
			{
                        	text: "Create", 
                        	submenu: { 
                            		id: "Creatediagram", 
                            		itemdata: [
					{ text: "New Use Case Diagram" }
                                	],
                         		}		
                    	},
			{
                        	text: "Arrange", 
                        	submenu: { 
                            		id: "arrange", 
                            		itemdata: [
					{ text: "Align Top" },
					{ text: "Align Bottom" },
					{ text: "Align Left" },
					{ text: "Align Right" }
                               	 	],
                         		}
                    	},
                    	"Help",
			"About"
                ];


	/*
	     Instantiate a MenuBar:  The first argument passed to the 
	     constructor is the id of the element to be created; the 
	     second is an object literal of configuration properties.
	*/
	
	var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", { 
	                                            lazyload: true, 
	                                            itemdata: aItemData 
	                                            });

	/*
	     Since this MenuBar instance is built completely from 
	     script, call the "render" method passing in a node 
	     reference for the DOM element that its should be 
	     appended to.
	*/
	oMenuBar.render(document.body);

	/*
	    Add a "show" event listener that keeps the left-most
	    submenu against the left edge of the browser viewport.
	*/
	function onSubmenuShow() {
		if (this.id == "yahoo") {
		
		    YAHOO.util.Dom.setX(this.element, 0);
		
		}

		var oElement,
		    nOffsetWidth;
	
		if ((this.id == "filemenu" || this.id == "editmenu") && 
		    YAHOO.env.ua.ie) {
	
			oElement = this.element;
			nOffsetWidth = oElement.offsetWidth;
		
			/*
			    Measuring the difference of the offsetWidth before and after
			    setting the "width" style attribute allows us to compute the 
			    about of padding and borders applied to the element, which in 
			    turn allows us to set the "width" property correctly.
			*/
			oElement.style.width = nOffsetWidth + "px";
			oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
                    
		}
	}
                
	// Subscribe to the "show" event for each submenu
	oMenuBar.subscribe("show", onSubmenuShow);
	});

        </script>

	</head>
	<body class="yui-skin-sam">
		<div id="dd-demo-1" class="dd-demo"></div>
		<div id="dd-demo-2" class="dd-demo"></div>
		<div id="dd-demo-3" class="dd-demo"></div>

		<script type="text/javascript">
		    (function() {
		        var dd, dd2, dd3;
		        YAHOO.util.Event.onDOMReady(function() {
		            dd = new YAHOO.util.DD("dd-demo-1");
		            dd2 = new YAHOO.util.DD("dd-demo-2");
		            dd3 = new YAHOO.util.DD("dd-demo-3");
		        });
		    })();
		</script>
	</body>
</html>
